<template>
  <div class="allifo">
    <h1 style="color:black">欢迎，{{studentName}}</h1>
    <!-- 自定义组件-第一种写法 -->
    <!-- 绑定原生事件使用native修饰符 -->
    <School @useBysu="look_school" @demo="m1" @click.native="show"></School>
    <!-- 自定义组件-第二种写法 -->
    <!-- <School ref="school"></School> -->
    <Student :look_name="look_name" :author="author"></Student>
  </div>
</template>

<script>
  import b from "./components/Student.vue"
  import c from "./components/School.vue"
  export default {
    name:"App",
    data(){
      return {
        author:'苏凉',
        studentName:''
      }
    },
    components:{
      Student:b,
      School:c
    },
    methods:{
      look_name(name){
        console.log(name);
        this.studentName = name;
      },
      look_school(name){
        console.log(name)
      },
      m1(){
        console.log('demo事件被触发！！')
      },
      //绑定的原生事件
      show(){
        alert(111)
      }
    },
    mounted(){
      // this.$refs.school.$on('useBysu',this.look_school)
    }
  }
</script>

<style>
  .allifo{
    color:white;
  }
</style>